<template>
	<view style="width: 100%;display: flex;">
		<view class="left">
			<manage></manage>
		</view>
		<view style="width: 90%;">
			<uni-search-bar placeholder="搜索订单编号" bgColor="#EEEEEE" @confirm="search" cancelButton="none" />
			<!-- :loading="true" -->
			<uni-table border stripe type="selection" emptyText="暂无更多数据" selection-change="multipleChoose">

				<uni-tr>
					<uni-th align="center" width="60">序号</uni-th>
					<uni-th align="center">编号</uni-th>
					<uni-th align="center">标题</uni-th>
					<uni-th align="center">内容</uni-th>
					<uni-th align="center">地址</uni-th>
					<uni-th align="center">时间</uni-th>
					<uni-th align="center">图片</uni-th>
					<uni-th align="center">操作</uni-th>
					<uni-th align="center"></uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in culture" :key="index">
					<uni-td align="center">{{index}}</uni-td>
					<uni-td align="center">{{item.id}}</uni-td>
					<uni-td align="center">{{item.cultureTitle}}</uni-td>						
					<uni-td align="center">{{item.cultureContent}}</uni-td>
					<uni-td align="center">{{item.cultureAddress}}</uni-td>
					<uni-td align="center">{{item.cultureTime}}</uni-td>
					<uni-td align="center">
						<image :src="item.cultureImage"></image>
					</uni-td>
					<uni-td>
						<view class="uni-group">
							<button class="uni-button" size="mini" type="primary" @click="edit(index)">修改</button>
							<button class="uni-button" size="mini" type="warn" @click="del(index)">删除</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view>
				<uni-row>
					<uni-col :span="3" class="grid">
						<button type="primary" icon="uni-icon-circle-plus-outline" size="mini"
							@click="inputDialogToggle" class="uni-button" width="30px">新增
						</button>
					</uni-col>
					<uni-col :span="3" class="grid">
						<button type="warn" icon="uni-icon-delete" size="mini" @click="delSelect" class="uni-button"
							width="30px">删除
						</button>
					</uni-col>
				</uni-row>
			</view>
			<br />
			<!-- <uni-pagination :total="50" title="标题文字" /> -->
			<!--分页条-->
			<uni-pagination background layout="prev, pager, next" :total="page.totalRecords" :page-size="page.pageSize"
				@current-change="currentChange()">
			</uni-pagination>
			<view>
				<!-- 输入框示例 -->
				<uni-popup ref="inputDialog" type="dialog">

<<<<<<< HEAD
					<uni-popup-dialog ref="inputClose" title="新增文章" @confirm="addgdroundinput" @close="closeinput">
						<uni-forms :modelid="addground" labelWidth="80px">
							<uni-forms-item label="标题:" prop="cultureTitle" leftIcon="plusempty">
								<uni-easyinput v-model="addground.cultureTitle"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="地址:" prop="cultureAddress" leftIcon="plusempty">
								<uni-easyinput v-model="addground.cultureAddress"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="内容:" leftIcon="plusempty" prpo="cultureContent">
								<textarea style="border: 1px solid; width: 95%;" type="text" maxlength="10000"
									v-model="addground.cultureContent"></textarea>
							</uni-forms-item>
							<uni-forms-item label="图片:"  leftIcon="plusempty">
								<uni-easyinput v-model="img" ref="img" type="file" placeholder="请插入图片" :disabled="true">
								</uni-easyinput>
								<button @click="addselect" type="default">上传</button><br>
							</uni-forms-item>
						</uni-forms>
					</uni-popup-dialog>
				</uni-popup>
			</view>
			<view style="height: 500px;">
				<uni-popup ref="eduDialog" type="dialog">
					<uni-popup-dialog ref="inputClose" title="修改商品信息" @confirm="dialogInputConfirm" @close="dialogedu">
						<uni-forms :modelid="ediground" labelWidth="120px" labelAlign="center">
							<uni-forms-item label="编号:" prop="id" leftIcon="plusempty">
								<uni-easyinput v-model="ediground.id" :disabled="true"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="标题:" prop="cultureTitle" leftIcon="plusempty">
								<uni-easyinput v-model="ediground.cultureTitle"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="地址:" prop="cultureAddress" leftIcon="plusempty">
								<uni-easyinput v-model="ediground.cultureAddress"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="内容:" leftIcon="plusempty" prpo="cultureContent">
								<textarea style="border: 1px solid; width: 95%;" type="text" maxlength="10000"
									v-model="ediground.cultureContent"></textarea>
							</uni-forms-item>
							<uni-forms-item label="图片:"  leftIcon="plusempty">
								<uni-easyinput v-model="img" ref="img" type="file" placeholder="请插入图片" :disabled="true">
								</uni-easyinput>
								<button @click="addselect" type="default">上传</button><br>
							</uni-forms-item>
						</uni-forms>
					</uni-popup-dialog>
				</uni-popup>
			</view>
			<view>
				<uni-popup ref="delDialog" type="dialog">
					<uni-popup-dialog ref="inputClose" title="删除信息" @confirm="delculture" @close="delDian">
						<text>确定要删除这篇文章吗？</text>
					</uni-popup-dialog>
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script>
	import manage from "@/components/manage/manage.vue";
	export default {
		components: {
			manage,
		},
		data() {
			return {
				intxt: '',
				img:"",
				culture: [],
				addground: {
					// cultureImage: '',
					cultureTitle: "",
					cultureAddress: '',
					cultureContent: ""
				},
				ediground: {
					id: "",
					cultureTitle: "",
					cultureAddress: '',
					cultureContent: ""
				},
				page: {
					pageSize: 10, //每页条数,  默认10条
					totalRecords: 0, //总条数
					totalPages: 0, //总页数
					pageNum: 0,
				},
				current: 0,
				delindex: 0
			}
		},
		methods: {
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].id === evt.detail.id) {
						this.current = i;
						break;
					}
				}
			},
			addselect() {
				uni.chooseImage({
					count: 1,
					success: (rst) => {
						console.log(rst)
						this.img=rst.tempFiles[0]
					}
				});
			},
			edlselect() {
				uni.chooseImage({
					count: 1,
					success: (rst) => {
						console.log(rst)
						this.img=rst.tempFiles[0]
					}
				});
			},
			// // 每页显示多少条数据
			sizeChange(e) {
				this.page.pageSize = e;
			},
			//翻页
			currentChange(e) {
				this.page.pageNum = e.current;
			},
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			edit(index) {
				this.ediground =JSON.parse(JSON.stringify(this.culture[index]))
				this.$refs.eduDialog.open()
			},
			addgdroundinput() {
				console.log(this.img)
					uni.uploadFile({
						url:this.api.Getculture+"POST",
						file:this.img,
						name: "img",
						formData:{
							'cultureJson':JSON.stringify(this.addground)
						},
					success: (res) => {
						this.getculture()
						if (res.data) {
							uni.showToast({
								title: '文章添加成功',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: '文章添加失败',
								icon: "none"
							})
						}
					},
					fail: () => {
						uni.showToast({
							title: '文章添加失败',
							icon: "none"
						})
					},
				})
			},
			closeinput() {
				uni.showToast({
					title: '取消添加文章',
					icon: "none"
				})
			},
			dialogedu() {
				uni.showToast({
					title: '取消修改文章',
					icon: "none"
				})
			},
			delDian() {
				uni.showToast({
					title: '取消删除文章',
					icon: "none"
				})
			},
			dialogInputConfirm() {
				uni.uploadFile({
					url:this.api.Getculture+"update",
					file:this.img,
					name:"img",
					formData:{
						'cultureJson':JSON.stringify(this.ediground)
					},
					success: (res) => {
						this.getculture()
						if (res.data) {
							uni.showToast({
								title: "更新成功"
							})
							this.getculture()
							let sc = JSON.parse(res.data)
							uni.setStorage({
								key: this.ediground.id.toString(),
								data: sc.obj
							})
						} else {
							uni.showToast({
								title: '文章修改失败',
								icon: "none"
							})
						}
					},
					fail: () => {
						uni.showToast({
							title: '文章修改失败',
							icon: "none"
						})
					},
				})
			},
			del(e) {
				this.delindex = e
				this.$refs.delDialog.open()
			},
			delculture() {
				uni.request({
					url: this.api.Getculture,
					method: "DELETE",
					data:[this.culture[this.delindex].id],
					success: (res) => {
						this.getculture()
						if (res.data) {
							uni.showToast({
								title: '文章删除成功',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: '文章删除失败',
								icon: "none"
							})
						}
					},
					fail: () => {
						uni.showToast({
							title: '文章删除失败',
							icon: "none"
						})
					},
				})
			},
			getculture() {
				uni.request({
					url: this.api.Getculture,
					method: "GET",
				}).then(data => {
					let [err, res] = data
					this.culture = res.data
					console.log(res.data)
					this.page.totalRecords = this.culture.length;
					this.page.totalPages = this.page.totalRecords / this.page.pageSize + 1;
				})
			}
		},
		onLoad() {
			this.getculture()
		}
	}
</script>

<style scoped>
	.uni-group {
		display: flex;
		align-items: center;
		margin-top: 10px;
	}

	.left {
		border: 1px solid;
		background-color: #c5c5c5;
		height: 100%;
		width: 10 %;
	}

	.rec {
		float: left;
		width: 75%;
		/* height: 100%; */

	}


	input {
		border: 1px solid;
		border-radius: 18px;
	}

	uni-button {
		font-size: 7px;
		border-radius: 18px;
	}

	.table {
		width: 100%;
		border: 1px solid;
		text-align: center;
	}

	.uni-th {
		/* border: #000000 1px solid; */
		/* background-color: #c5c5c5; */
	}

	uni-td {
		align-items: center;
	}

	.button-edu {
		background-color: #18BC37;
	}

	.button-del {
		background-color: #c00000;
	}

	.scroll-Y {
		height: 600px+;
	}
</style>
